<template>
  <!-- <div class="search-tooltip"> -->
  <div>
    <div
      class="search-history"
      v-show="historyList.length"
    >
      <div class="title">搜索历史
        <i class="iconfont icon-shanchu" @click="deleteHistory"></i>
        <span 
          v-show="historyList.length > 4"
          class="all-tag font-12"
          @click="showAllTag"
        >
          {{ !showAll ? '查看全部' : '收起' }}
        </span>
      </div>
      <!-- <checkable-tag
        :tagList="reduceHistory"
        :selectTag="selected"
        @checked="name => changeTag(name)"
      /> -->
      <a-tag
        closable
        v-for="item in history"
        :key="item.id"
        @click="() => $emit('searchHistory', item.name)"
        @close="() => $emit('deleteOne', item.id)"
      >
        {{ item.name }}
      </a-tag>
    </div>
    <div class="search-hot">
      <div class="title">热搜榜<a-icon type="fire" /></div>
      <div
        class="hot-list pointer"
        v-for="(item, index) in searchList"
        :key="index"
        @click="searchHot(item.searchWord)"
      >
        <span class="hot-index">{{ index + 1 }}</span>
        <div class="hot-info">
          <div class="hot-top">
            <span class="hot-name">{{ item.searchWord }}</span>
            <span class="mleft-10">{{ item.score }}</span>
            <span
              class="mleft-10 type-tag"
              :style="item.iconType === 2 ? 'color: #5bda78' : 'color: #ec4141'"
            >
              {{ icontype(item.iconType) }}
            </span>
          </div>
          <div class="hot-introduce">{{ item.content }}</div>
        </div>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
// import CheckableTag from '@/components/Library/CheckableTag';
import { Tag } from 'ant-design-vue';

export default {
  name: 'Search',

  components: {
    ATag: Tag,
    // CheckableTag
  },

  data() {
    return {
      selected: '',
      showAll: false
    }
  },

  props: {
    searchList: {
      type: Array,
      default: () => []
    },
    // 搜索历史
    historyList: {
      type: Array,
      default: () => []
    }
  },

  computed: {
    history() {
      if (this.showAll) {
        return this.historyList;
      }
      return this.historyList.slice(0, 4);
    }
  },

  methods: {
    changeTag(name) {
      this.selected = name;
    },
    searchHot(value) {
      this.$emit('searchWord', value);
    },
    icontype(t) {
      switch(t) {
        case 1:
          return 'HOT'
        case 2:
          return 'NEW';
        case 5:
          return 'UP';
        default: 
          return '';
      }
    },
    deleteHistory() {
      this.$emit('delete');
    },
    showAllTag() {
      this.showAll = !this.showAll;
    }
  }
}
</script>

<style lang="less" scoped>
.search-history, .search-hot {
  line-height: 0;
}
/deep/span.ant-tag {
  border-radius: 15px;
  line-height: 25px;
  margin-left: 10px;
  margin-right: 0;
  margin-bottom: 5px;
}
.title {
  display: flex;
  line-height: 35px;
  align-items: center;
  padding: 0 10px;
  font-size: 16px;
  color: #666;
  > i {
    font-size: 14px;
    margin-left: 5px;
  }
  .all-tag {
    flex: 1;
    text-align: end;
  }
}
.hot-list {
  height: 50px;
  line-height: 50px;
  display: flex;
  align-items: center;
  color: #c2c2c2;
  &:hover {
    background: #f2f2f2;
  }
  .hot-index {
    width: 40px;
    text-align: center;
  }
  .hot-info {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    .hot-top {
      font-size: 12px;
      width: 100%;
      height: 100%;
      .hot-name {
        color: #000;
      }
      .type-tag {
        font-family: fantasy;
        // color: red;
        font-style: oblique;
      }
    }
    .hot-introduce {
      position: absolute;
      width: 100%;
      font-size: 12px;
      bottom: 0px;
      height: 15px;
      line-height: 15px;
    }
  }
}
</style>